/*
* @Author: Marte
* @Date:   2017-04-06 19:55:18
* @Last Modified by:   Marte
* @Last Modified time: 2017-04-09 20:30:01
*/

'use strict';

$(function(){
// 监听屏幕宽度，手机下的下来导航条位置自适应
    $(window).on('resize',function(){
        var navHeight = $('#header .navbar').height();
        if(screenWidth()){
            $('#nav-t').css({
                'position': 'static',
                'top': 0
            });
        }else {
            $('#nav-t').css({
                'position': 'relative',
                'top': navHeight
            });
        }
    });


// 屏幕大小函数
function screenWidth() {
    var screenWidth = $(window).width() > 768;
    return screenWidth;
}

// 轮播图
    // 得到轮播图的函数
    function resi() {
        // var screenWidth = $(window).width() > 768; // 屏幕小于768为true
        // 遍历轮播盒子
        $('#main-carouse .carousel-inner .item').each(function(index, el) {
            // 当大于768，轮播图为背景图，否则为img标签
            // 因为背景图无法自由缩放，
            var imgSrc = null;
            if(screenWidth()){
                // 大于768: 清空img标签，得到大图的地址，并设置高度为410
                imgSrc = $(el).data('img-gt');
                $(el).html('').css({
                    'background-image': "url('" + imgSrc +"')",
                    'height': '410px'
                })
            }else {
                // 小于768: 去掉高度，添加img标签，设置小图的地址
                imgSrc = $(el).data('img-lt');
                $(el).css({
                    'height': ''
                }).html('<img src="' + imgSrc +'" alt="" />')
                .children().css({
                    'width': '100%'
                })
            }
        });
    }
    // 监听窗口事件，并立即执行一次轮播图
    $(window).on('resize',resi).trigger('resize');
// 轮播图滑动事件
    // 获取滑动的值
    var $carousel = $('.carousel');
    var startX,endX;
    var touchWidth = 50;
    // 绑定滑动事件，根据距离判定滑动方向
    $carousel.on('touchstart',function(e){
        // console.log(e);
        // 得到x坐标
        startX = e.originalEvent.changedTouches[0].clientX
    });
    $carousel.on('touchmove',function(e){
        // console.log(e);
        // 得到滑动中的x坐标
        endX = e.originalEvent.changedTouches[0].clientX;
    });

    $carousel.on('touchend',function(e){
        // 开始-离开的距离，给一个值touchWidth，大于就触发
        var sul = Math.abs(startX - endX)
        if(sul > touchWidth){
            // 开始比离开的距离大，就是向左滑，否则就是向右
            // carousel('next')是bootstrap的轮播图播放事件
            startX > endX?$carousel.carousel('next'):$carousel.carousel('prev');
        }

    });



// 初始化运行工具提示条
    $('[data-toggle="tooltip"]').tooltip();


// tab栏
// 遍历tab列表，把宽度相加
    var width = 30;
    $('.nav-tabs').children().each(function(index, el) {
        width += el.clientWidth;
    })
// 当列表宽度比屏幕大，外面的大盒子才变大
    if(width > $(window).width()){
        $('.nav-tabs').width(width).parent().css('overflow-x', 'scroll');
    }


// new
    var $news = $('#news .nav-pills li');
    $news.on('click',function(){
        $('.news-title').text($(this).data('title'));
    })
});

